<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="4000" height="2000" >your browser does not support the canvas tag </canvas>

<script type="text/javascript">

var frameCount = 0;


function draw() 
{
    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d');
 //   ctx.clearRect(0, 0, canvas.width, canvas.height);
    return ctx
}

function Xian(len) 
{
    var ctx = draw();

    ctx.strokeStyle = "red";
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(x+len, y+len);//设置起点  
    ctx.lineTo(x+len+1, x+len+1);//画线   
    ctx.closePath();
    ctx.stroke();
    x=len;
    y=len;
}

function Rect()
{
    var ctx = draw();
    ctx.fillStyle='#FF0000';
    ctx.fillRect(0,0,80,100);
}



function Dot(x, y) 
{
    var ctx = draw();
    ctx.strokeStyle = "red";
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(x, y);//设置起点  
    ctx.lineTo(x+1, y);//画线   
    ctx.closePath();
    ctx.stroke();
}
var canvas=document.getElementById('myCanvas');

var canvasX = canvas.width;
var canvasY = canvas.height;

var scalaf = canvasX/4;
//var scalaf = Math.log(canvasX)/Math.log(10);

var x = 0;
var y = 0;


var cx = -0.75;
var cy = 0.0;




/*
var cx = 0.49;
var cy = -0.56;

var cx = 0.49;
var cy = -0.75;
*/

function JuliaSet()
{
    var rdf = Math.random();
    var theta = 0
    x= x - cx;
    y = y - cy;
    if (x == 0)
        theta = Math.PI/2;
    else if(x > 0 )
        theta = Math.atan(y/x);
    else if(x < 0)
        theta = Math.PI - Math.atan(y/x);
    theta /= 2;

    var r = Math.sqrt(x*x + y*y);
    if (rdf < 0.5) r = Math.sqrt(r);
    else r = - Math.sqrt(r);

    x = r*Math.cos(theta);
    y = r*Math.sin(theta);
    //document.write(x, y);

    var canvas=document.getElementById('myCanvas');
 //   ctx.clearRect(0, 0, canvas.width, canvas.height);
    Dot(x* scalaf + canvasX/2,y*scalaf+canvasY/2);
}





//Rect();

function looping()
{
    looped = requestAnimationFrame(looping);
    if (true) 
    {
        frameCount += 1;
        //Dot(0+frameCount, 0+frameCount);
        for (var i = 1; i <  120; i++) JuliaSet();
        
    }
    else
    {
        window.cancelAnimationFrame(looped);
        looped = null;
        //document.write("end")
    }
}
looping();


</script>

</body>
</html>
